<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!--引入vue相应文件-->
    <script src="../js/vue.js"></script>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="../css/index.css">
    <!-- 引入ElementUI组件库 -->
    <script src="../elementUI/index.js"></script>
    <!-- 引入docs样式 -->
    <link rel="stylesheet" href="../css/docs.css">
    <!-- 引入博客样式 -->
    <link rel="stylesheet" href="../commonCSS/blog.css">
</head>

<body>
    <div id="app" style="margin:50px;">
        <h1>Checkbox 多选框</h1>
        <p>一组备选项中进行多选</p>

        <h2>基础用法</h2>
        <p>单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。</p>
        <p>在el-checkbox元素中定义v-model绑定变量，单一的checkbox中，默认绑定变量的值会是Boolean，选中为true。</p>
        <div class="source demo-block demo-zh-CN demo-button">
            <template>
                <!-- `checked` 为 true 或 false -->
                <el-checkbox v-model="checked1">备选项</el-checkbox>
              </template>
        </div>
        <br/>
        <br/>



        <h2>禁用状态</h2>
        <p>多选框不可用状态。</p>
        <p>设置disabled属性即可。</p>
        <div class="source demo-block demo-zh-CN demo-button">
            <template>
                <el-checkbox v-model="checked2_1" disabled>备选项1</el-checkbox>
                <el-checkbox v-model="checked2_2" disabled>备选项</el-checkbox>
              </template>
        </div>
        <br/>
        <br/>



        <h2>多选框组</h2>
        <p>适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。</p>
        <p>checkbox-group元素能把多个 checkbox 管理为一组，只需要在 Group 中使用v-model绑定Array类型的变量即可。 </p>
        <p>el-checkbox 的 label属性是该 checkbox 对应的值，若该标签中无内容，</p>
        <p>则该属性也充当 checkbox 按钮后的介绍。label与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。</p>
        <div class="source demo-block demo-zh-CN demo-button">
            <template>
                <el-checkbox-group v-model="checkList">
                  <el-checkbox label="复选框 A"></el-checkbox>
                  <el-checkbox label="复选框 B"></el-checkbox>
                  <el-checkbox label="复选框 C"></el-checkbox>
                  <el-checkbox label="禁用" disabled></el-checkbox>
                  <el-checkbox label="选中且禁用" disabled></el-checkbox>
                </el-checkbox-group>
            </template>
        </div>
        <br/>
        <br/>


        <h2>indeterminate 状态</h2>
        <p>indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果</p>
        <p></p>
        <div class="source demo-block demo-zh-CN demo-button">
            <template>
                <el-checkbox :indeterminate="ind_isIndeterminate" v-model="ind_checkAll" @change="ind_handleCheckAllChange">全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="ind_checkedCities" @change="ind_handleCheckedCitiesChange">
                  <el-checkbox v-for="ind_city in ind_cities" :label="ind_city" :key="ind_city">{{ind_city}}</el-checkbox>
                </el-checkbox-group>
              </template>
        </div>
        <br/>
        <br/>



        <h2>可选项目数量的限制</h2>
        <p>使用 min 和 max 属性能够限制可以被勾选的项目的数量。</p>
        <p></p>
        <div class="source demo-block demo-zh-CN demo-button">
            <template>
                <el-checkbox-group 
                  v-model="limit_checkedCities"
                  :min="1"
                  :max="2">
                  <el-checkbox v-for="limit_city in limit_cities" :label="limit_city" :key="limit_city">{{limit_city}}</el-checkbox>
                </el-checkbox-group>
              </template>
        </div>
        <br/>
        <br/>



        <h2>按钮样式</h2>
        <p>按钮样式的多选组合。</p>
        <p>只需要把el-checkbox元素替换为el-checkbox-button元素即可。此外，Element 还提供了size属性。</p>
        <div class="source demo-block demo-zh-CN demo-button">
            <template>
                <div>
                  <el-checkbox-group v-model="ch_btn_checkboxGroup1">
                    <el-checkbox-button v-for="ch_btn_city in ch_btn_cities" :label="ch_btn_city" :key="ch_btn_city">{{ch_btn_city}}</el-checkbox-button>
                  </el-checkbox-group>
                </div>
                <div style="margin-top: 20px">
                  <el-checkbox-group v-model="ch_btn_checkboxGroup2" size="medium">
                    <el-checkbox-button v-for="ch_btn_city in ch_btn_cities" :label="ch_btn_city" :key="ch_btn_city">{{ch_btn_city}}</el-checkbox-button>
                  </el-checkbox-group>
                </div>
                <div style="margin-top: 20px">
                  <el-checkbox-group v-model="ch_btn_checkboxGroup3" size="small">
                    <el-checkbox-button v-for="ch_btn_city in ch_btn_cities" :label="ch_btn_city" :disabled="ch_btn_city === '北京'" :key="ch_btn_city">{{ch_btn_city}}</el-checkbox-button>
                  </el-checkbox-group>
                </div>
                <div style="margin-top: 20px">
                  <el-checkbox-group v-model="ch_btn_checkboxGroup4" size="mini" disabled>
                    <el-checkbox-button v-for="ch_btn_city in ch_btn_cities" :label="ch_btn_city" :key="ch_btn_city">{{ch_btn_city}}</el-checkbox-button>
                  </el-checkbox-group>
                </div>
              </template>
        </div>
        <br/>
        <br/>

        <h2>带有边框</h2>
        <p>设置border属性可以渲染为带有边框的多选框。</p>
        <p></p>
        <div class="source demo-block demo-zh-CN demo-button">
            <template>
                <div>
                  <el-checkbox v-model="ch_bor_checked1" label="备选项1" border></el-checkbox>
                  <el-checkbox v-model="ch_bor_checked2" label="备选项2" border></el-checkbox>
                </div>
                <div style="margin-top: 20px">
                  <el-checkbox v-model="ch_bor_checked3" label="备选项1" border size="medium"></el-checkbox>
                  <el-checkbox v-model="ch_bor_checked4" label="备选项2" border size="medium"></el-checkbox>
                </div>
                <div style="margin-top: 20px">
                  <el-checkbox-group v-model="ch_bor_checkboxGroup1" size="small">
                    <el-checkbox label="备选项1" border></el-checkbox>
                    <el-checkbox label="备选项2" border disabled></el-checkbox>
                  </el-checkbox-group>
                </div>
                <div style="margin-top: 20px">
                  <el-checkbox-group v-model="ch_bor_checkboxGroup2" size="mini" disabled>
                    <el-checkbox label="备选项1" border></el-checkbox>
                    <el-checkbox label="备选项2" border></el-checkbox>
                  </el-checkbox-group>
                </div>
              </template>
        </div>
        <br/>
        <br/>

        <h2>el-checkbox 属性/Checkbox Attributes</h2>
        <table class="common-table">
            <thead>
                <tr>
                    <th>参数</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>可选值</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>value / v-model</td>
                    <td>绑定值</td>
                    <td>string / number / boolean</td>
                    <td>—</td>
                    <td>—</td>
                </tr>
                <tr>
                    <td>label</td>
                    <td>选中状态的值（只有在<code>checkbox-group</code>或者绑定对象类型为<code>array</code>时有效）</td>
                    <td>string / number / boolean</td>
                    <td>—</td>
                    <td>—</td>
                </tr>
                <tr>
                    <td>true-label</td>
                    <td>选中时的值</td>
                    <td>string / number</td>
                    <td>—</td>
                    <td>—</td>
                </tr>
                <tr>
                    <td>false-label</td>
                    <td>没有选中时的值</td>
                    <td>string / number</td>
                    <td>—</td>
                    <td>—</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>是否禁用</td>
                    <td>boolean</td>
                    <td>—</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>border</td>
                    <td>是否显示边框</td>
                    <td>boolean</td>
                    <td>—</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>size</td>
                    <td>Checkbox 的尺寸，仅在 border 为真时有效</td>
                    <td>string</td>
                    <td>medium / small / mini</td>
                    <td>—</td>
                </tr>
                <tr>
                    <td>name</td>
                    <td>原生 name 属性</td>
                    <td>string</td>
                    <td>—</td>
                    <td>—</td>
                </tr>
                <tr>
                    <td>checked</td>
                    <td>当前是否勾选</td>
                    <td>boolean</td>
                    <td>—</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>indeterminate</td>
                    <td>设置 indeterminate 状态，只负责样式控制</td>
                    <td>boolean</td>
                    <td>—</td>
                    <td>false</td>
                </tr>
            </tbody>
        </table>

        <h2>Checkbox Events</h2>
        <table class="common-table">
            <thead>
                <tr>
                    <th>事件名称</th>
                    <th>说明</th>
                    <th>回调参数</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>change</td>
                    <td>当绑定值变化时触发的事件</td>
                    <td>更新后的值</td>
                </tr>
            </tbody>
        </table>

        <h2>Checkbox-group Attributes</h2>
        <table class="common-table">
            <thead>
                <tr>
                    <th>参数</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>可选值</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>value / v-model</td>
                    <td>绑定值</td>
                    <td>array</td>
                    <td>—</td>
                    <td>—</td>
                </tr>
                <tr>
                    <td>size</td>
                    <td>多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效</td>
                    <td>string</td>
                    <td>medium / small / mini</td>
                    <td>—</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>是否禁用</td>
                    <td>boolean</td>
                    <td>—</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>min</td>
                    <td>可被勾选的 checkbox 的最小数量</td>
                    <td>number</td>
                    <td>—</td>
                    <td>—</td>
                </tr>
                <tr>
                    <td>max</td>
                    <td>可被勾选的 checkbox 的最大数量</td>
                    <td>number</td>
                    <td>—</td>
                    <td>—</td>
                </tr>
                <tr>
                    <td>text-color</td>
                    <td>按钮形式的 Checkbox 激活时的文本颜色</td>
                    <td>string</td>
                    <td>—</td>
                    <td>#ffffff</td>
                </tr>
                <tr>
                    <td>fill</td>
                    <td>按钮形式的 Checkbox 激活时的填充色和边框色</td>
                    <td>string</td>
                    <td>—</td>
                    <td>#409EFF</td>
                </tr>
            </tbody>
        </table>

        <h2>Checkbox-group Events</h2>
        <table class="common-table">
            <thead>
                <tr>
                    <th>事件名称</th>
                    <th>说明</th>
                    <th>回调参数</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>change</td>
                    <td>当绑定值变化时触发的事件</td>
                    <td>更新后的值</td>
                </tr>
            </tbody>
        </table>

        <h2>Checkbox-button Attributes</h2>
        <table class="common-table">
            <thead>
                <tr>
                    <th>参数</th>
                    <th>说明</th>
                    <th>类型</th>
                    <th>可选值</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>label</td>
                    <td>选中状态的值（只有在<code>checkbox-group</code>或者绑定对象类型为<code>array</code>时有效）</td>
                    <td>string / number / boolean</td>
                    <td>—</td>
                    <td>—</td>
                </tr>
                <tr>
                    <td>true-label</td>
                    <td>选中时的值</td>
                    <td>string / number</td>
                    <td>—</td>
                    <td>—</td>
                </tr>
                <tr>
                    <td>false-label</td>
                    <td>没有选中时的值</td>
                    <td>string / number</td>
                    <td>—</td>
                    <td>—</td>
                </tr>
                <tr>
                    <td>disabled</td>
                    <td>是否禁用</td>
                    <td>boolean</td>
                    <td>—</td>
                    <td>false</td>
                </tr>
                <tr>
                    <td>name</td>
                    <td>原生 name 属性</td>
                    <td>string</td>
                    <td>—</td>
                    <td>—</td>
                </tr>
                <tr>
                    <td>checked</td>
                    <td>当前是否勾选</td>
                    <td>boolean</td>
                    <td>—</td>
                    <td>false</td>
                </tr>
            </tbody>
        </table>

        <br/>
        <br/>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                checked1: true,
                checked2_1: false,
                checked2_2: true,
                checkList: ['选中且禁用', '复选框 A'],
                // indeterminate 状态
                ind_cityOptions: ['上海', '北京', '广州', '深圳'],
                ind_checkAll: false,
                ind_checkedCities: ['上海', '北京'],
                ind_cities: [], // ind_cities: this.ind_cityOptions, // 获取不到值
                ind_isIndeterminate: true,
                // min and max 
                limit_cityOptions: ['上海', '北京', '广州', '深圳'],
                limit_checkedCities: ['上海', '北京'],
                limit_cities: [],
                // checkbox button
                ch_btn_cityOptions: ['上海', '北京', '广州', '深圳'],
                ch_btn_checkboxGroup1: ['上海'],
                ch_btn_checkboxGroup2: ['上海'],
                ch_btn_checkboxGroup3: ['上海'],
                ch_btn_checkboxGroup4: ['上海'],
                ch_btn_cities: [],
                // checkbox border
                ch_bor_checked1: true,
                ch_bor_checked2: false,
                ch_bor_checked3: false,
                ch_bor_checked4: true,
                ch_bor_checkboxGroup1: [],
                ch_bor_checkboxGroup2: [],
                end: 1
            }
        },
        created() {
            // indeterminate 状态
            this.ind_cities = ['上海', '北京', '广州', '深圳'];
            // console.log(this.ind_cities);
            // min and max 
            this.limit_cities = this.limit_cityOptions;
            // checkbox button
            this.ch_btn_cities = this.ch_btn_cityOptions;

        },
        methods: {
            // indeterminate 状态
            ind_handleCheckAllChange(val) {
                this.ind_checkedCities = val ? this.ind_cityOptions : [];
                this.ind_isIndeterminate = false;
            },
            ind_handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.ind_checkAll = checkedCount === this.ind_cities.length;
                this.ind_isIndeterminate = checkedCount > 0 && checkedCount < this.ind_cities.length;
            }
        }
    });
</script>

</html>